<template>
  <div class="data-statistics">
    <ContentForm name="区站缺陷统计">
      <div slot="searchform" class="form-top">
        <form action="">
          <p class="form-top-p">
            <el-select v-model="valuek.deptCode" clearable placeholder="选择供电段" @change="line">
              <el-option
                v-for="item in formz.selectSection"
                :key="item.value"
                :label="item.deptName"
                :value="item.deptCode" />
            </el-select>
          </p>
          <p class="form-top-p">
            <el-select v-model="valuek.selectLin" clearable placeholder="选择线路">
              <el-option
                v-for="item in formz.selectLin"
                :key="item.value"
                :label="item.label"
                :value="item.value" />
            </el-select>
          </p>
          <p class="form-top-p">
            <el-date-picker
              v-model="valuek.selectShij"
              class="input-long"
              type="daterange"
              range-separator="至"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
              value-format="yyyy-MM-dd" />
          </p>
          <p class="form-top-p">
            <el-button type="primary" size="mini" icon="el-icon-search" @click="getlist">查询</el-button>
          </p>
        </form>
      </div>
      <div slot="valueform" v-loading="loading" class="value-form">
        <div style="width:100%;">
          <div v-for="item in allList" :key="item.lineId" class="list">
            <el-header class="head" style="height:38px;">
              <h4>{{ item.lineName }}</h4>
              <p>{{ item.addr }}</p>
              <span>缺陷共：{{ item.allCount }}条</span>
            </el-header>
            <el-main>
              <div class="content">
                <div v-for="(child,key) in item.data" :key="key" class="station" :class="child.count!==0?'active':''">
                  <div class="line-h">
                    <span class="dot" @click="child.count!==0?getdialog(child,item):''" />
                  </div>
                  <span class="line" @click="child.count!==0?getdialog(child,item):''">{{ child.siteName }}{{ child.count!==0?`(${child.count}条)`:'' }}</span>
                </div>
              </div>
            </el-main>
            <el-footer class="foot" style="height:30px;">
              <div>一共{{ item.allSite }}个区站,无缺陷的一共有{{ item.haveNoDefect }}个,有缺陷的共{{ item.haveDefect }}个</div>
            </el-footer>
          </div>
        </div>
      </div>
    </ContentForm>
    <el-dialog
      class="dialog"
      :title="dialogTitle+'的支柱信息'"
      :visible.sync="centerDialogVisible"
      width="90%"
      top="5vh">
      <region-dialog v-loading="dialogload" :xingb="xingBlist" :params="dialogParams" :data="dialogData" />
    </el-dialog>
  </div>
</template>

<script>
import { line, getListSection, listDirection } from '@/api/cms/detect-data/basic'
import { findDefectsRegionalRelations, findPillarDefect } from '@/api/cms/data-statistics'
import RegionDialog from './components/region-dialog'
export default {
  name: 'DefectRegion',
  components: {
    RegionDialog
  },
  data() {
    return {
      dialogParams: {},
      loading: false,
      dialogload: false,
      dialogTitle: '',
      dialogData: [],
      xingBlist: [],
      centerDialogVisible: false,
      allList: [],
      valuek: {
        deptCode: '',
        selectShij: '',
        selectLin: '' // 选择线路
      },
      formz: {
        selectSection: [], // 所选得供电段
        selectLin: []
      }
    }
  },
  watch: {
  },
  mounted() {
    getListSection().then(res => {
      this.formz.selectSection = res.data
    })
    listDirection().then(res => {
      this.xingBlist = res.data
    })
    this.line()
    this.getlist()
  },
  methods: {
    getdialog(val, line) {
      this.dialogParams = {
        line: line,
        lineSite: val,
        deptCode: this.valuek.deptCode || ''
      }
      this.dialogData = []
      this.dialogTitle = val.siteName
      var obj = {
        lineSiteCode: val.siteCode,
        deptCode: this.valuek.deptCode || '',
        lineId: line.lineId,
        startTime: this.valuek.selectShij[0] || '',
        endTime: this.valuek.selectShij[1] || ''
      }
      this.centerDialogVisible = true
      this.dialogload = true
      findPillarDefect(obj).then(res => {
        this.dialogload = false
        this.dialogData = res.data.allPillar || []
      }).catch(_ => {
        this.dialogload = false
      })
    },
    line(val) {
      const obj = {
        deptId: ''
      }
      if (val) {
        const value = this.formz.selectSection.find((ele) => {
          return ele.deptCode === val
        })
        obj.deptId = value.id
      }
      this.valuek.selectLin = ''
      line(obj).then(res => {
        const lines = []
        if (res.data) {
          res.data.forEach(item => {
            const line = {}
            line.value = item.lineId + '-' + item.lineCode
            line.label = item.lineName
            lines.push(line)
          })
        }
        this.formz.selectLin = lines
      })
    },
    getlist() {
      var obj = {
        deptCode: this.valuek.deptCode || '',
        lineId: this.valuek.selectLin ? this.valuek.selectLin.split('-')[0] || '' : '',
        startTime: this.valuek.selectShij ? this.valuek.selectShij[0] || '' : '',
        endTime: this.valuek.selectShij ? this.valuek.selectShij[1] || '' : ''
      }
      this.loading = true
      this.allList = []
      findDefectsRegionalRelations(obj).then(res => {
        this.loading = false
        this.allList = res.data.allLine
      }).catch(_ => {
        this.loading = false
      })
    }
  }
}
</script>

<style scoped lang="scss">
.input-long{
  width: 280px;
  ::v-deep .el-input__icon{
    line-height: 22px;
  }
}
.list{
  width: 100%;
  .head{
    height: 38px;
    display: flex;
    align-items: center;
    color: white;
    background:#005cb0;
    padding: 0 10px;
    h4{
      margin: 0;
      display: inline-block;
    }
    p{
      margin-left: 20px;
      font-size: 14px;
      flex: 1;
    }
    span{
      display: inline-block;
      text-align: right;
      line-height: 18px;
      font-size: 13px;
      border-radius: 4px;
      padding: 2px 10px;
      background: white;
      color: red;
    }
  }
  .content{
    .station{
      float: left;
      padding: 14px 0;
      .line-h{
        height: 4px;
        background: #006fc5;
        position: relative;
        text-align: center;
        margin-bottom: 10px;
        .dot{
          position: absolute;
          z-index: 10;
          display: inline-block;
          margin-top: -4px;
          margin-left: -2px;
          height: 12px;
          width: 12px;
          border-radius: 50%;
          border: solid 2px #006fc5;
          background: white;
        }
      }
      .line{
        font-size: 14px;
        margin: 0 10px;
      }
    }
    .active{
      .line-h{
        .dot{
          border-color: red;
        }
        .dot:hover{
          cursor:pointer;
        }
      }
      .line{
        color: red;
      }
      .line:hover{
        cursor:pointer;
        }
    }
  }
  .foot{
    border-top:solid 1px rgb(216, 214, 214);
    line-height: 30px;
    font-size: 14px;
    background: rgb(243, 240, 240);
  }
}
.dialog{
  ::v-deep .el-dialog{
    height: 90%;
    .el-dialog__header{
      padding:10px;
      background:#005cb0;
      text-align: left;
     .el-dialog__title{
        color: white;
        font-size: 15px;
      }
    }
    .el-dialog__headerbtn{
      top:12px;
      right:14px;
      font-size:18px;
      .el-icon-close{
        color: white;
      }
    }
    .el-dialog__body{
      padding: 0;
      height: calc(100% - 44px);
      overflow: auto;
    }
    .el-dialog__body::-webkit-scrollbar:hover,
    .el-dialog__body::-webkit-scrollbar {
        width: 6px;
      }
      .el-dialog__body::-webkit-scrollbar-thumb,
      .el-dialog__body::-webkit-scrollbar-thumb:hover,
      .el-dialog__body::-webkit-scrollbar-thumb:active {
        background-color: #aed0ea;
      }
  }
}
</style>
